const path = require('path')
const webpack = require('webpack') // eslint-disable-line
const HtmlWebpackPlugin = require('html-webpack-plugin') // eslint-disable-line
const ExtractTextPlugin = require('extract-text-webpack-plugin') // eslint-disable-line
const webpackMerge = require('webpack-merge')
// const PurifyCSSPlugin = require('purifycss-webpack') // css-tree-shaking 去除多余无用的css
// const glob = require('glob')

const baseConfig = require('./webpack.base')
const pkg = require('../package.json')

const config = webpackMerge(baseConfig, {
  entry: {
    vendor: Object.keys(pkg.dependencies), // 将第三方依赖单独打包
  },
  output: {
    filename: 'js/[name].[chunkhash:8].js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: [
          path.resolve(__dirname, '../node_modules'),
        ],
      }, {
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader',
            options: {
              singleton: true, // 生成一个css文件
            },
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                // modules: true, // 使用css-module 使用css-module后就不能与purifycss配合使用
                minimize: true, // 压缩css 如果使用了purifycss这里就不需要了，直接再purifycss中压缩，因为它也会处理一次
                // localIdentName: 'purify_[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  // 自动补全css3的前缀插件
                  require('autoprefixer'), // eslint-disable-line
                  // 生成雪碧图插件
                  require('postcss-sprites')({ // eslint-disable-line
                    spritePath: path.resolve(__dirname, '../dist/img'),
                    filterBy(imgPath) {
                      // 如果是icon图标文件 则生成称雪碧图
                      // 图片文件名如果包含icon 则会被打包成雪碧图
                      if (imgPath.url.indexOf('icon') === -1) {
                        return Promise.reject()
                      }
                      return Promise.resolve()
                    },
                  }),
                ],
              },
            },
            {
              loader: 'less-loader',
            },
          ],
        }),
      }, {
        test: /\.(png|jpg|gif|jpeg)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024, // 1k以下的图片转化为Base64编码格式
              publicPath: '../',
              name: 'img/[name].[hash:5].[ext]',
            },
          },
          // 开启压缩后 webpack打包会报错 此问题待解决
          // {
          //   // 压缩png
          //   loader: 'img-loader',
          //   options: {
          //     plugins: [
          //       // eslint-disable-next-line
          //       require('imagemin-pngquant')({
          //         floyd: 0.5,
          //         speed: 2,
          //       }),
          //     ],
          //   },
          // },
        ],
      }, {
        test: /\.(eot|svg|ttf|woff)/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000,
              name: 'font/[name].[hash:5].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 将css与js分离打包
    new ExtractTextPlugin('css/[name].[contenthash:8].css'),

    // css-tree-shaking 去除无用的css 减少打包后的大小
    // new PurifyCSSPlugin({
    //   paths: glob.sync(path.resolve(__dirname, '../src/**/*.js')),
    //   minimize: true,
    // }),

    // 将业务代码与第三方依赖分离
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'js/[name].[chunkhash:8].js',
    }),

    // 使用js-tree-shaking 去除未使用到的js模块 并压缩js代码
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
})

module.exports = config
